<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xiaoyao</title>
    <link rel="stylesheet" type="text/css" href="home.css">
    <link rel="stylesheet" href="icon/iconfont.css">
</head>
<body>

<div class="header">
    <div class="loader">
        <span style="--i:1;">一</span>
        <span style="--i:2;">些</span>
        <span style="--i:3;">好</span>
        <span style="--i:4;">用</span>
        <span style="--i:5;">的</span>
        <span style="--i:6;">网</span>
        <span style="--i:7;">站</span>
        <span style="--i:7;">。</span>
    </div>
</div>

<div class="navbar">
    <a href="https://www.baidu.com/">百度一下，你就知道</a>
    <a class="right" id="chart">图表</a>
</div>

<div class="row">
    <div class="side">
        <div class="menuCard" style="height:88px;text-align: center;">
            <h3>程序员</h3><span class="icon iconfont">&#xe757;</span>
        </div><br>
        <div class="menuCard" style="height:88px;text-align: center;">
            <h3>设计</h3><span class="icon iconfont">&#xe79d;</span>
        </div><br>
        <div class="menuCard" style="height:88px;text-align: center;">
            <h3>产品</h3><span class="icon iconfont">&#xe61b;</span>
        </div><br>
        <div class="menuCard" style="height:88px;text-align: center;">
            <h3>通用</h3><span class="icon iconfont">&#xe61c;</span>
        </div><br>
    </div>
    <div class="main">
<!--        程序员-->
        <div class="cardFlex">
            <div style="width: 100%; margin-top: 16px; text-align: center;">------程序员专属工具------</div>
            <div class="card" id="cardOne1">
                <h1>Element UI</h1>
                <hr>
                <p style="text-indent:2em;">网站快速成型工具。</p>
            </div>
            <div class="card" id="cardOne2">
                <h1>稀土掘金</h1>
                <hr>
                <p style="text-indent:2em;">一个帮助开发者成长的社区。</p>
            </div>
            <div class="card" id="cardOne3">
                <h1>React</h1>
                <hr>
                <p style="text-indent:2em;">用于构建用户界面的 JavaScript 库。</p>
            </div>
            <div class="card" id="cardOne4">
                <h1>TypeScript</h1>
                <hr>
                <p style="text-indent:2em;">让我们使用 TypeScript 来创建一个简单的Web应用。</p>
            </div>
            <div class="card" id="cardOne5">
                <h1>Vue.js</h1>
                <hr>
                <p style="text-indent:2em;">易学易用，性能出色，适用场景丰富的 Web 前端框架。</p>
            </div>
            <div class="card" id="cardOne6">
                <h1>亦是美网络</h1>
                <hr>
                <p style="text-indent:2em;">致力于操作系统应用与计算机网络技术的IT网站。</p>
            </div>
        </div>
<!--        设计-->
        <div class="cardFlex">
            <div style="width: 100%; margin-top: 16px; text-align: center;">------设计专属工具------</div>
            <div class="card" id="cardTwo1">
                <h1>即时设计</h1>
                <hr>
                <p style="text-indent:2em;">可云端编辑的专业级 UI 设计工具，为中国设计师量身打造 Windows 也能用的「协作版 Sketch」。</p>
            </div>
            <div class="card" id="cardTwo2">
                <h1>花瓣设计</h1>
                <hr>
                <p style="text-indent:2em;">花瓣，陪你做生活的设计师。</p>
            </div>
            <div class="card" id="cardTwo3">
                <h1>站酷ZCOOL</h1>
                <hr>
                <p style="text-indent:2em;">站酷ZCOOL,中国设计师互动平台。</p>
            </div>
            <div class="card" id="cardTwo4">
                <h1>大作网</h1>
                <hr>
                <p style="text-indent:2em;">全球设计灵感搜索引擎。</p>
            </div>
            <div class="card" id="cardTwo5">
                <h1>视觉中国</h1>
                <hr>
                <p style="text-indent:2em;">花瓣，陪你做生活的设计师。</p>
            </div>
            <div class="card" id="cardTwo6">
                <h1>UI中国</h1>
                <hr>
                <p style="text-indent:2em;">UI中国用户体验平台,中国用户体验联盟理事单位。</p>
            </div>
        </div>
<!--        产品-->
        <div class="cardFlex">
            <div style="width: 100%; margin-top: 16px; text-align: center;">------产品专属工具------</div>
            <div class="card" id="cardThree1">
                <h1>36Kr</h1>
                <hr>
                <p style="text-indent:2em;">36氪_让一部分人先看到未来。</p>
            </div>
            <div class="card" id="cardThree2">
                <h1>知犀</h1>
                <hr>
                <p style="text-indent:2em;">思维创造，积累每一个灵感的瞬间。</p>
            </div>
            <div class="card" id="cardThree3">
                <h1>iSlide</h1>
                <hr>
                <p style="text-indent:2em;">让 PPT 设计简单起来。</p>
            </div>
            <div class="card" id="cardThree4">
                <h1>奶牛快传</h1>
                <hr>
                <p style="text-indent:2em;">迅捷不止文件，传输创意无限。</p>
            </div>
            <div class="card" id="cardThree5">
                <h1>ProcessOn</h1>
                <hr>
                <p style="text-indent:2em;">免费在线流程图思维导图。</p>
            </div>
            <div class="card" id="cardThree6">
                <h1>PMCAFF</h1>
                <hr>
                <p style="text-indent:2em;">PMCAFF产品经理社区。</p>
            </div>
        </div>
        <div class="cardFlex">
            <div style="width: 100%; margin-top: 16px; text-align: center;">------通用工具------</div>
            <div class="card" id="cardFour1">
                <h1>iconfont</h1>
                <hr>
                <p style="text-indent:2em;">阿里巴巴矢量图标库。</p>
            </div>
            <div class="card" id="cardFour2">
                <h1>ABCD PDF</h1>
                <hr>
                <p style="text-indent:2em;">ABCD PDF在线转换工具，所有工具都是 100% 免费使用。</p>
            </div>
            <div class="card" id="cardFour3">
                <h1>tikolu</h1>
                <hr>
                <p style="text-indent:2em;">emoji合成。</p>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <h4 style="color: gray;">江湖可能因为少了谁而失色，却不会因为少了谁后就不再是江湖。</h4>
    <a href="javascript:window.scrollTo({left:0,top:0,behavior:'smooth'})" class="btn" title="回到顶端"><span class="icon iconfont upBtn">&#xe602;</span></a>
</div>

</body>
</html>
<script>
    let login = document.getElementById("chart");
    login.onclick = function (){
        window.location.href='chart.html';
    }

    var menuCard = document.getElementsByClassName("menuCard");
    var mainCard = document.getElementsByClassName("cardFlex");
    for(var i = 0;i < menuCard.length;i++){
        menuCard[i].index = i;
        menuCard[i].onclick = function (){
            for (var j=0; j < menuCard.length; j++){
                console.log(menuCard[this.index]);
                mainCard[j].style.display = "none";
                mainCard[this.index].style.display = "flex";
                console.log(this.index)
            }
        }
    }

    //程序员developer
    var devOne = document.getElementById("cardOne1");
    var devTwo = document.getElementById("cardOne2");
    var devThree = document.getElementById("cardOne3");
    var devFour = document.getElementById("cardOne4");
    var devFive = document.getElementById("cardOne5");
    var devSix = document.getElementById("cardOne6");
    devOne.onclick = function (){
        window.open("http://www.yishimei.cn/")
    }
    devTwo.onclick = function (){
        window.open("https://juejin.cn/")
    }
    devThree.onclick = function (){
        window.open("https://zh-hans.reactjs.org/")
    }
    devFour.onclick = function (){
        window.open("https://typescript.bootcss.com/")
    }
    devFive.onclick = function (){
        window.open("https://cn.vuejs.org/")
    }
    devSix.onclick = function (){
        window.open("https://element.eleme.cn/#/zh-CN")
    }

    //设计designer
    var desOne = document.getElementById("cardTwo1");
    var desTwo = document.getElementById("cardTwo2");
    var desThree = document.getElementById("cardTwo3");
    var desFour = document.getElementById("cardTwo4");
    var desFive = document.getElementById("cardTwo5");
    var desSix = document.getElementById("cardTwo6");
    desOne.onclick = function (){
        window.open("https://js.design/community")
    }
    desTwo.onclick = function (){
        window.open("https://huaban.com/")
    }
    desThree.onclick = function (){
        window.open("https://www.zcool.com.cn/")
    }
    desFour.onclick = function (){
        window.open("https://www.bigbigwork.com/")
    }
    desFive.onclick = function (){
        window.open("https://www.vcg.com/")
    }
    desSix.onclick = function (){
        window.open("https://www.ui.cn/")
    }

    //产品product
    var proOne = document.getElementById("cardThree1");
    var proTwo = document.getElementById("cardThree2");
    var proThree = document.getElementById("cardThree3");
    var proFour = document.getElementById("cardThree4");
    var proFive = document.getElementById("cardThree5");
    var proSix = document.getElementById("cardThree6");
    proOne.onclick = function (){
        window.open("https://www.36kr.com/")
    }
    proTwo.onclick = function (){
        window.open("https://www.zhixi.com/")
    }
    proThree.onclick = function (){
        window.open("https://www.islide.cc/")
    }
    proFour.onclick = function (){
        window.open("https://cowtransfer.com/")
    }
    proFive.onclick = function (){
        window.open("https://www.processon.com/")
    }
    proSix.onclick = function (){
        window.open("https://www.pmcaff.com/")
    }

    //通用universal
    var uniOne = document.getElementById("cardFour1");
    var uniTwo = document.getElementById("cardFour2");
    var uniThree = document.getElementById("cardFour3");
    var uniFour = document.getElementById("cardFour4");
    var uniFive = document.getElementById("cardFour5");
    var uniSix = document.getElementById("cardFour6");
    uniOne.onclick = function (){
        window.open("https://www.iconfont.cn/")
    }
    uniTwo.onclick = function (){
        window.open("https://abcdpdf.com/zh-cn/")
    }
    uniThree.onclick = function (){
        window.open("https://tikolu.net/emojimix/")
    }
    // uniFour.onclick = function (){
    //     window.open("")
    // }
    // uniFive.onclick = function (){
    //     window.open("")
    // }
    // uniSix.onclick = function (){
    //     window.open("")
    // }

</script>